<template>
  <div id="injection-data-view">
    <dv-full-screen-container
      enableFullScreen
      :icon-position="{ right: '12PX', top: '30PX' }"
    >
      <dv-loading v-if="loading">Loading...</dv-loading>
      <template v-else>
        <div class="main-header">
          <div class="main-header-top">
            <div><Timer /></div>
            <div>{{ workshopItem ? workshopItem.label : "" }}车间看板</div>
            <Header-Right
              @workshop-change="handleWorkshopChange"
            ></Header-Right>
          </div>
          <div class="main-header-bottom">
            <span>班次：{{ currentGroup }}</span>
            <span>
              当班人员：
              <span v-for="(u, i) in userDutys" :key="i">
                {{ u.realname }}（<span
                  :class="{ error: u.takeHour >= u.tiredHour }"
                  >连续当班{{ u.takeHour }}H</span
                >）
              </span>
            </span>
          </div>
        </div>

        <dv-border-box-1 class="main-containers">
          <div class="left-chart-container">
            <dv-border-box-11
              title="今日PET粒子投放情况"
              class="item-container"
            >
              <Left-Chart-1 :key="key + 'left1'" :refreshKey="refreshKey" />
            </dv-border-box-11>
            <dv-border-box-11
              title="今日品控任务执行情况"
              class="item-container"
            >
              <Left-Chart-2
                :key="key + 'left2'"
                :refreshKey="refreshKey"
                :workshopItem="workshopItem"
              />
            </dv-border-box-11>
            <dv-border-box-11 title="今日注胚产线电耗" class="item-container">
              <Left-Chart-3
                :key="key + 'left3'"
                :refreshKey="refreshKey"
                :workshopItem="workshopItem"
              />
            </dv-border-box-11>
          </div>
          <div class="center-chart-container">
            <dv-border-box-11
              title="今日注胚生产情况"
              class="item-container paddingBottom1"
            >
              <Center-Chart-1
                :key="key + 'center1'"
                :refreshKey="refreshKey"
                :workshopItem="workshopItem"
              />
            </dv-border-box-11>

            <dv-border-box-11 title="注胚机时间段产量" class="item-container">
              <Center-Chart-2
                :key="key + 'center2'"
                :refreshKey="refreshKey"
                :workshopItem="workshopItem"
              />
            </dv-border-box-11>

            <dv-border-box-11 title="注胚机月度累计状况" class="item-container">
              <Center-Chart-3
                :key="key + 'center3'"
                :refreshKey="refreshKey"
                :workshopItem="workshopItem"
              />
            </dv-border-box-11>
          </div>

          <div class="right-chart-container">
            <dv-border-box-11
              title="今日干燥机设备状况"
              class="item-container paddingBottom1"
            >
              <Right-Chart-1
                :key="key + 'right1'"
                :refreshKey="refreshKey"
                :workshopItem="workshopItem"
              />
            </dv-border-box-11>

            <dv-border-box-11
              title="今日注胚机设备状况"
              class="item-container-bottom1"
            >
              <Right-Chart-2
                :key="key + 'right2'"
                :refreshKey="refreshKey"
                :workshopItem="workshopItem"
              />
            </dv-border-box-11>

            <dv-border-box-11
              title="今日除湿机设备状况"
              class="item-container-bottom2"
            >
              <Right-Chart-3
                :key="key + 'right3'"
                :refreshKey="refreshKey"
                :workshopItem="workshopItem"
              />
            </dv-border-box-11>
          </div>
        </dv-border-box-1>
      </template>
    </dv-full-screen-container>
  </div>
</template>

<script>
import LeftChart1 from "./LeftChart1";
import LeftChart2 from "./LeftChart2";
import LeftChart3 from "./LeftChart3";
import CenterChart1 from "./CenterChart1";
import CenterChart2 from "./CenterChart2";
import CenterChart3 from "./CenterChart3";
import RightChart1 from "./RightChart1";
import RightChart2 from "./RightChart2";
import RightChart3 from "./RightChart3";
import HeaderRight from "./HeaderRight";
import Timer from "../../components/timer";
import { getUserDutyInfo } from "@/api/dashboard/injectionWorkshop";

export default {
  name: "DataView",
  components: {
    LeftChart1,
    LeftChart2,
    LeftChart3,
    CenterChart1,
    CenterChart2,
    CenterChart3,
    RightChart1,
    RightChart2,
    RightChart3,
    Timer,
    HeaderRight,
  },
  data() {
    return {
      loading: true,
      key: new Date().getTime(),
      // 定时器，每1小时刷新一次
      refreshTimer: null,
      // 刷新标识
      refreshKey: new Date().getTime(),
      currentGroup: "",
      userDutys: [],
      workshopItem: null,
      workshopOptions: [],
    };
  },
  mounted() {
    setTimeout(() => {
      this.loading = false;

      this.setRefreshTimer();
    }, 1000);
  },
  methods: {
    // 轮询
    setRefreshTimer() {
      // 每1分钟刷新一次
      if (this.refreshTimer) {
        clearTimeout(this.refreshTimer);
      }
      this.refreshTimer = setTimeout(async () => {
        // 刷新
        this.refreshKey = new Date().getTime();

        // 重置定时器
        this.setRefreshTimer();
      }, 60000);
    },
    // 切换车间
    async handleWorkshopChange(item) {
      // 清除轮询
      if (this.refreshTimer) {
        clearTimeout(this.refreshTimer);
      }

      this.workshopItem = item || null;

      await this.getUserDutyInfoData();

      this.key = new Date().getTime();

      // 重新开始轮询
      this.setRefreshTimer();
    },
    // 查询值班情况
    async getUserDutyInfoData() {
      if (!this.workshopItem?.value) {
        return;
      }
      try {
        const res = await getUserDutyInfo({
          workshopId: this.workshopItem.value,
        });

        this.currentGroup = res.data[0].classesName;
        this.userDutys = res.data;
      } catch (error) {
        this.currentGroup = "";
        this.userDutys = [];
      }
    },
  },
  beforeDestroy() {
    // 清除轮询
    if (this.refreshTimer) {
      clearTimeout(this.refreshTimer);
      this.refreshTimer = null;
    }
  },
  activated() {
    this.setRefreshTimer();
  },
  deactivated() {
    // 清除轮询
    if (this.refreshTimer) {
      clearTimeout(this.refreshTimer);
      this.refreshTimer = null;
    }
  },
};
</script>

<style lang="scss" scoped>
#injection-data-view {
  width: 100%;
  height: 100%;
  font-size: 16px;
  background-color: #030409;
  color: #fff;

  #dv-full-screen-container {
    background-image: url("~@/assets/images/kanban/kanban_bg1.png");
    background-size: cover;
    background-position: center;
    box-shadow: 0 0 3px blue;
    display: flex;
    flex-direction: column;
  }

  .main-header {
    &-top {
      height: 80px;
      line-height: 80px;
      padding: 0 40px 0 30px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 40px;
      font-weight: bold;
      text-align: center;
      color: #00ffff;
      & > div:first-child {
        width: 220px;
        text-align: left;
      }
      & > div:last-child {
        width: 220px;
        display: flex;
        align-content: center;
        justify-content: flex-end;
      }
    }
    &-bottom {
      line-height: 28px;
      padding: 0 30px;
      & > span:first-child {
        margin-right: 20px;
      }
    }

    .mh-left {
      font-size: 20px;
      color: rgb(1, 134, 187);

      a:visited {
        color: rgb(1, 134, 187);
      }
    }

    .mh-middle {
      font-size: 30px;
    }

    .mh-left,
    .mh-right {
      width: 450px;
    }
  }

  .error {
    color: #f54e1e;
  }

  ::v-deep .main-containers {
    height: calc(100% - 80px);

    .border-box-content {
      padding: 20px;
      box-sizing: border-box;
      display: flex;
    }

    .paddingBottom1 {
      .border-box-content {
        padding-bottom: 10px;
      }
    }
  }

  .left-chart-container {
    width: 33.33%;
    // padding: 10px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;

    .border-box-content {
      flex-direction: column;
    }
  }

  .center-chart-container {
    width: 33.33%;
    // padding-left: 5px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
  }

  .right-chart-container {
    width: 33.33%;
    // padding-left: 5px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
  }

  .item-container {
    height: 33.333%;
    padding: 6px;
  }
  .item-container-bottom1 {
    height: 48.995%;
    padding: 6px;
  }
  .item-container-bottom2 {
    height: 17.665%;
    padding: 6px;
  }
  .dv-border-box-11 .dv-border-svg-container {
    text {
      font-size: 16px;
    }
  }
}
</style>
